<template>
  <view class="app-container">
    <view class="title-padding"></view>
    <view class="top-container padding-lr-lg flex align-center">
      <view class="flex align-center top-main-content">
        <view
          class="cu-avatar round margin-right-sm shadow"
          :style="{
            backgroundImage: `url(${
              info.m_avatar ? 'http://cyjs.pzhkj.cn' + info.m_avatar : avatarUrl
            })`,
          }"
        ></view>
        <view class="">
          <text class="phone-number text-xl">
            {{ info.m_mobile || phoneNumber }}
          </text>
          <navigator url="/pages/profile/index" hover-class="navigator-hover">
            <text class="text-sm to-profile-label">
              个人信息，账号完全 &nbsp;
            </text>
            <uni-icons
              :size="14"
              class="uni-icon-wrapper"
              color="rgba(113,128,138,1)"
              type="arrowright"
            />
          </navigator>
        </view>
      </view>
    </view>
    <view
      class="bottom-container"
      :style="{ height: `calc(${windowHeight}px - 500upx)` }"
    >
      <uni-list class="list">
        <uni-list-item class="list-item" title="我的关注" @tap="goToStars" />
        <uni-list-item class="list-item" title="我的方案" @tap="goToPlans" />
        <uni-list-item class="list-item" title="意见反馈" @tap="goToAdvice" />
        <uni-list-item class="list-item" title="退出登陆" @tap="logout" />
      </uni-list>
    </view>
  </view>
</template>

<script>
import uniIcons from '@/uni-components/uni-icons/uni-icons.vue'
import uniSection from '@/uni-components/uni-section/uni-section.vue'
import uniList from '@/uni-components/uni-list/uni-list.vue'
import uniListItem from '@/uni-components/uni-list-item/uni-list-item.vue'
import { logout, getInfo } from '@/api/user'

export default {
  components: {
    uniIcons,
    uniSection,
    uniList,
    uniListItem,
  },
  data() {
    return {
      windowHeight: 0,
      info: {},
      avatarUrl: 'https://www.diyimei.net/upload/2018/1537192515751749.jpg',
      phoneNumber: 15132789098,
    }
  },
  onShow() {
    this._refresh()
  },
  methods: {
    _refresh() {
      getInfo().then(res => {
        if (res.code === 1 && res.data) {
          console.log(res.data)
          // this.info = res.data
          this.$set(this.info, 'm_mobile', res.data.m_mobile)
          this.$set(this.info, 'm_avatar', res.data.m_avatar)
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
      })
    },
    goToAdvice() {
      uni.navigateTo({
        url: '../advice/index',
      })
    },
    goToStars() {
      uni.navigateTo({
        url: '../stars/index',
      })
    },
    goToPlans() {
      uni.navigateTo({
        url: '../ucenter/plan',
      })
    },
    logout() {
      logout().then(res => {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        })
        uni.navigateTo({
          url: '../login/index',
        })
      })
    },
  },
  onLoad: function () {
    // console.log(`- onshow`);
    uni.getSystemInfo({
      success: res => {
        // console.log(res);
        this.windowHeight = res.windowHeight
      },
    })
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f9faff;
  width: 100%;
  height: 100vh;
  .top-container {
    height: 500upx;
    margin-top: 0;
    background-color: rgba(249, 250, 254, 1);
    .top-main-content {
      width: 100%;
    }
    .cu-avatar {
      width: 160upx;
      height: 160upx;
      border: 4upx solid #ffffff;
      box-shadow: 0px 2px 4px 0px rgba(112, 155, 232, 0.1);
    }
    .phone-number {
      font-size: 44upx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    .to-profile-label {
      display: inline-block;
      font-size: 24upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(113, 128, 138, 1);
      line-height: 24upx;
    }
  }
  .bottom-container {
    background-color: #fff;
    .list {
      // height: calc(100vh - var(--window-bottom) - 300upx);
      .list-item {
        height: 130upx;
        line-height: 130upx;
        padding-right: 30upx;
        /deep/ .uni-list-item__container {
          padding: 0;
          border-bottom-width: 1px;
          border-bottom-color: rgb(237, 239, 246);
          border-bottom-style: solid;
        }
      }
    }
  }
}
</style>
